<template>
  <div class="container">
    <div v-show="!showDetails">
      <div>
        <table>
          <tr>
            <th>
              <span>课程：</span>
              <el-button
                @click="openCourseList = true"
                type="text"
                style="width: 150px; text-align: left;"
              >
                <span v-if="courseSelect">{{ courseSelect.name }}</span>
                <span v-else>未选择</span>
              </el-button>
            </th>
            <th>
              <span>课程组长：</span>
              <el-button
                @click="openCourseGroupLeaderList = true"
                type="text"
                style="width: 150px; text-align: left;"
              >
                <span v-if="courseGroupLeaderSelect">{{
                  courseGroupLeaderSelect.name
                }}</span>
                <span v-else>未选择</span>
              </el-button>
            </th>
            <th>
              <span>教师：</span>
              <el-button
                @click="openTeacherList = true"
                type="text"
                style="width: 150px; text-align: left;"
              >
                <span v-if="teacherSelect">{{ teacherSelect.name }}</span>
                <span v-else>未选择</span>
              </el-button>
            </th>
            <th>
              <el-button type="primary" icon="el-icon-search">搜索</el-button>
            </th>
          </tr>
        </table>
      </div>
      <div>
        <!-- 课程筛选 -->
        <el-dialog title="选择课程" :visible.sync="openCourseList">
          <el-input placeholder="请输入关键字" v-model="courseKeyword">
            <template slot="prepend"
              >课程名</template
            >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="searchCourseListByKeyword"
            ></el-button>
          </el-input>
          <br />
          <br />
          <el-radio-group v-model="courseSelect">
            <el-radio
              v-for="(course, index) in courseList"
              :key="'course' + index"
              :label="course"
              >{{ course.name }}</el-radio
            >
          </el-radio-group>
          <div slot="footer" class="dialog-footer">
            <el-button @click="courseSelect = ''">清 空</el-button>
            <el-button type="primary" @click="openCourseList = false"
              >确 定</el-button
            >
          </div>
        </el-dialog>
        <!-- 课程组长筛选 -->
        <el-dialog
          title="选择课程组长"
          :visible.sync="openCourseGroupLeaderList"
        >
          <el-input
            placeholder="请输入关键字"
            v-model="courseGroupLeaderKeyword"
          >
            <template slot="prepend"
              >课程组长姓名</template
            >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="searchGroupLeaderListByKeyword"
            ></el-button>
          </el-input>
          <br />
          <br />
          <el-radio-group v-model="courseGroupLeaderSelect">
            <el-radio
              v-for="(courseGroupLeader, index) in courseGroupLeaderList"
              :label="courseGroupLeader"
              :key="'tcg' + index"
              >{{ courseGroupLeader.name }}</el-radio
            >
          </el-radio-group>
          <div slot="footer" class="dialog-footer">
            <el-button @click="courseGroupLeaderSelect = ''">清 空</el-button>
            <el-button type="primary" @click="openCourseGroupLeaderList = false"
              >确 定</el-button
            >
          </div>
        </el-dialog>
        <!-- 教师筛选 -->
        <el-dialog title="选择教师" :visible.sync="openTeacherList">
          <el-input placeholder="请输入关键字" v-model="courseKeyword">
            <template slot="prepend"
              >教师名</template
            >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="searchTeacherListByKeyword"
            ></el-button>
          </el-input>
          <br />
          <br />
          <el-radio-group v-model="teacherSelect">
            <el-radio
              v-for="(teacher, index) in teacherList"
              :label="teacher"
              :key="'t' + index"
              >{{ teacher.name }}</el-radio
            >
          </el-radio-group>
          <div slot="footer" class="dialog-footer">
            <el-button @click="teacherSelect = ''">清 空</el-button>
            <el-button type="primary" @click="openTeacherList = false"
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </div>
      <hr />
      <!-- 所有课程组列表 -->
      <el-table
        :data="
          teachingGroupList.slice(
            (currentPage - 1) * pagesize,
            currentPage * pagesize
          )
        "
        stripe
        border
        @row-click="rowClick"
      >
        <el-table-column prop="courseName" label="课程"></el-table-column>
        <el-table-column
          prop="courseGroupName"
          label="课程组"
        ></el-table-column>
        <el-table-column
          prop="courseGroupLeaderName"
          label="课程组长"
        ></el-table-column>
        <!-- <el-table-column prop="teacherName" label="教师"></el-table-column> -->
      </el-table>

      <br />
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableTotal"
        style="margin-left: 30%;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
    <!-- 课程组详情 -->
    <div v-show="showDetails">
      <groupDetails :groupDetails="groupDetails" @closeDetails="closeDetails" />
    </div>
  </div>
</template>

<script>
import { getTeachingGroupList } from "@/api/teaching-group";
import groupDetails from "@/views/education-instructionalMatters/teaching-group/details";

export default {
  name: "TeachingGroup",
  data() {
    return {
      tableTotal: 10,
      currentPage: 1,
      pagesize: 10,
      showDetails: false, //显示课程组详情否
      teachingGroupList: [], // 所有课程组列表
      groupDetails: {}, //某一行的课程组详情信息

      openCourseList: false, //显示课程筛选对话框
      courseKeyword: "", //课程搜索关键词
      courseList: [], //课程选择列表
      courseSelect: "", //选择的课程

      openCourseGroupLeaderList: false, //显示课程组组长筛选对话框
      courseGroupLeaderKeyword: "", //课程组组长搜搜关键词
      courseGroupLeaderList: [], //课程组组长列表
      courseGroupLeaderSelect: "", //选择的课程组组长

      openTeacherList: false,
      teacherKeyword: "",
      teacherList: [],
      teacherSelect: ""
    };
  },
  components: {
    groupDetails
  },
  created() {
    // 获取所有课程组列表
    this.getTeachingGroupList();
    //获取课程列表
    this.getCourseList();
    //获取课程组长列表
    this.getGroupLeaderList();
    //获取教师列表
    this.getTeacherList();
  },
  methods: {
    // 获取所有课程组列表
    getTeachingGroupList() {
      getTeachingGroupList().then(res => {
        this.tableTotal = res.data.total;
        this.teachingGroupList = res.data.teachingGroupList;
      });
    },

    //获取课程列表
    getCourseList() {
      this.courseList = [
        { id: "001", name: "Python程序设计" },
        { id: "002", name: "java程序设计" },
        { id: "003", name: "C语言程序设计" }
      ];
    },

    //获取课程组长列表
    getGroupLeaderList() {
      this.courseGroupLeaderList = [
        { id: "001", name: "鲁昊" },
        { id: "002", name: "廖森" },
        { id: "003", name: "志健" }
      ];
    },

    //获取教师列表
    getTeacherList() {
      this.teacherList = [
        { id: "201724113132", name: "鲁昊" },
        { id: "201724113102", name: "志健" },
        { id: "201724113127", name: "廖森" }
      ];
    },

    // 根据关键字查询课程列表
    searchCourseListByKeyword() {
      this.courseList = [
        { id: "001", name: "Python程序设计" },
        { id: "002", name: "java程序设计" }
      ];
    },

    // 根据关键字查询课程组长列表
    searchGroupLeaderListByKeyword() {
      this.courseGroupLeaderList = [
        { id: "001", name: "鲁昊" },
        { id: "002", name: "廖森" }
      ];
    },

    // 根据关键字查询教师列表
    searchTeacherListByKeyword() {
      this.teacherList = [
        { id: "201724113102", name: "志健" },
        { id: "201724113127", name: "廖森" }
      ];
    },

    //点击某一列,获取这一行的详情信息，传给详情组件
    rowClick(val) {
      this.groupDetails = val;
      this.showDetails = true;
    },

    //详情组件传过来的数据
    closeDetails(val) {
      this.showDetails = val;
    },

    // 换页
    handleSizeChange: function(size) {
      this.pagesize = size;
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
    }
  }
};
</script>

<style scoped>
.container {
  width: 80%;
  max-width: 100%;
  margin: 20px auto;
}
span {
  font-weight: 500;
}
th {
  text-align: left;
  width: 300px;
}
</style>
